# Femto.css, a simple CSS framework #
![](https://img.shields.io/static/v1?label=Language&message=CSS,%20Javascript&color=blue)
![](https://img.shields.io/static/v1?label=License&message=Unlicense&color=lightgrey)
#### *No crap, just simple HTML* ####

Femto.css aims to be a very simple CSS framework that lets you generate modern
webpages without abusing the <div> tag, inline classes or having to spend valuable
time learning a stilted CSS framework. Femto.css is mainly intended to be used for projects that need
a website, small businesses and personal websites, but you can use it for anything!

## Download / Getting Started ##

### Using npm
1) Run `npm i -D git+https://notabug.org/nokoru/femtocss`

### Without npm

1) Clone the repository ```git clone https://notabug.org/nokoru/femtocss.git```

2) Select/open the `src/` directory.

3) Copy the following files to your website directory: ```femto.css```, ```femto.js```, ```Inter/``` and either ```light-theme.css``` or ```dark-theme.css``` depending on which theme you prefer. You can optionally just copy the `Inter/` directory and
any minified version of the framework (`*.min.css`) (you should do this
only if you want to use a theme without copying two files).

3) Configure the femto.css file: there's a line that imports the light theme by default, you may change this if you're using other theme.

4) Add the `<meta viewport>` tag, the femto.css stylesheet and femto.js script to your HTML files:

```
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="path/to/femto.css" />
<script type="text/javascript" src="path/to/femto.js"></script>
```

5) Done! I recommend you to read [this quick tutorial](https://notabug.org/nokoru/femtocss/wiki) before using the framework, it's really easy to understand how to make a website using femtocss, but it's kinda different to other frameworks (which makes it simpler!).

## How to use it ##
Please read the [wiki/documentation](https://notabug.org/nokoru/femtocss/wiki). I wrote a short tutorial about how to use femto.css

Here's a [demo page](https://nokoru.neocities.org/femtocss) made using femto.css

## Why Femto.css exists ##
Because modern web development is full of annoying stuff and unnecessarily complex things like bloated JS front-ends, pretty stilted CSS frameworks and forced CDNs, so
this is my contribution to build a modern, but clean and easy-to-develop internet.
        
femto.css lets you generate modern websites without spending precious time trying to learn Bootstrap / Materialize / [insert a popular framework here]'s nested classes.

To use femto.css you only need to know basic HTML5 tags and basic CSS.

My main motivation to create Femto.css is that I'll probably need a modern CSS framework for my future projects' websites, and I want to keep those sites really simple for small projects.

## Warning ##
This software is still in Alpha phase, so it may lack features. You are invited to contribute implementing new features if you want!

## Contributing ##
If you want to contribute send a pull request and I'll review it. If you are not experienced using git or web technologies just [open an issue](https://notabug.org/nokoru/femtocss/issues) if you want to report a bug or propose a new feature or change.

## Credits ##
Written by [nokoru](https://nokoru.neocities.org) <[nokoru@disroot.org](mailto:nokoru@disroot.org)>

Inter font family by [Rasmus Andersson](https://rsms.me/), licensed under the SIL Open Font License Version 1.1 (see [Inter/license.txt](https://notabug.org/nokoru/femtocss/raw/master/Inter/license.txt) for details)

Femto.css is licensed under the Unlicense (it's public domain software, do what you want with it!)

The header background image is CC0. I don't know the license of the notabug.org logo, but it's a free cultural work I guess... (I'm using it only to link a webpage to this
repository). Anyway, for that image, all credit to the notabug.org Staff.

## Contact ##
I use XMPP fairly often, so it's a great idea to use it for chatting with me, or you can use Matrix if you don't like XMPP.

XMPP: [nokoru@disroot.org](xmpp:nokoru@disroot.org)

Matrix: @nokoru:matrix.linux.pizza (I recommend you to use the [Riot](https://riot.im) client)

Neocities: [nokoru.neocities.org](https://neocities.org/site/nokoru) (just post a message)
